<!--
 * @Author: 支付失败的当前热销商品列表
 * @Date: 2020-06-30 13:47:43
 * @LastEditTime: 2020-06-30 14:53:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \JK商城\jkshopping\src\pages\payment\pay\fail\components\goodList.vue
--> 
<template>
  <div class="goodList">
    <!--标题-->
    <div class="nav_title">
      <h2 class="name">当/前/热/销</h2>
    </div>
    <van-grid :column-num="2" :border="false" :gutter="5">
      <!--商品列表-->
      <van-grid-item class="goods_item" v-for="item of goodsList" :key="item.id">
        <!--商品图片-->
        <van-image class="goodsImg" width="80%" height="80%" :src="item.goods_thumb" />
        <!--商品名称-->
        <div class="title">
          <p class="name">{{item.goods_name}}</p>
        </div>
        <!--价钱和喜欢图标-->
        <div class="price_like">
          <span class="price">{{item.goods_price}}</span>
          <van-icon class="icon_like" name="like-o" />
        </div>
        <!--评价和好评率-->
        <div class="evaluate">
          <span class="comment_count">{{item.comment_count}}个评价</span>
          <span class="comment_rate">{{item.comment_rate}}好评率</span>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import * as api from "@/api/apiList/goods/goods.js"; //当前商品热销接口
export default {
  data() {
    return {
      goodsList: []
    };
  },
  methods: {
    async API_goods(is_recommend, is_discount) {
      let params = {
        is_recommend,
        is_discount
      };
      return await api.goods(params);
    },
   
  },
  async created() {
    let res = await this.API_goods(1, 0);
    if (res.data.code) {
      console.log(res.data.data.data);
      this.goodsList = res.data.data.data;
    }
  }
};
</script>

<style lang="scss" scoped>
.goodList {
  /*当前热销标题样式*/
  .nav_title {
    text-align: center;
    padding: 15px 0 15px 0;
    box-sizing: border-box;
    .name {
      font-size: 16px;
    }
  }
  /*商品列表*/
  .goods_item {
    /*商品图片*/
    .goodsImg {
    }
    /*商品名称*/
    .title {
      // width: 150px;
      /*商品名称样式*/
      .name {
      }
    }
    /*价钱和喜欢图标*/
    .price_like {
        margin-top: 10px;
      /*价钱样式*/
      .price {
       margin-right: 100px;
       color: rgb(226, 57, 57);
       font-weight: bold;
      }
      /*图标样式*/
      .icon_like {
          
       
      }
    }
    /*评价和好评率*/
    .evaluate {
        margin-top: 10px;
        margin-left: -10px;
        color: #ccc;
        font-size: 12px;
      /*评级数量样式*/
      .comment_count {
        margin-right: 10px;
      }
      /*好评率样式*/
      .comment_rate {
      }
    }
  }
}
</style>